<template>
  <view class="page">
    <!-- <image src="@/static/images/demo/3.jpg" style="width: 100%;" mode="widthFix"></image> -->
    <view class="add-active">
      <view class="group flex flex-c">
        <view class="key">活動類型</view>
        <u-input
          placeholder="請輸入"
          
          class="u-input flex-1"
          v-model="form.data1"
          :type="type"
          :border="border"
        />
      </view>
      <!-- <view class="group flex flex-c">
        <view class="key">活動主題</view>
        <view
          class="u-input flex-1"
          @click="show1 = true"
          style="height: 38px; border: solid 1px #dadbde"
        >
          {{ form.data2 || "請選擇" }}
          <view class="icon">
            <u-icon name="arrow-down-fill" color="#99a1b5"></u-icon>
          </view>
        </view>
      </view> -->
      <view class="group flex flex-c">
        <view class="key">活動标题</view>
        <u-input
          class="u-input flex-1"
          v-model="form.data3"
          :type="type"
          :border="border"
          
          placeholder="請輸入"
        />
      </view>
      <view class="group flex flex-c">
        <view class="key">活動描述</view>
        <u--textarea
          v-model="form.data3"
          class="u-input flex-1"
           
          placeholder="請輸入"
          style="padding-top: 8px"
        ></u--textarea>
        <!-- <u-input
          class="u-input flex-1"
          v-model="form.data3"
          :type="type"
          :border="border"
          
          placeholder="請輸入"
        /> -->
      </view>
      <!-- <view class="group flex flex-c">
        <view class="key">活動時間</view>
        <view
          class="u-input flex-1"
          @click="show = true"
          style="height: 38px; border: solid 1px #dadbde"
        >
          {{ form.data4 || "請選擇" }}

          <view class="icon">
            <u-icon name="calendar-fill" color="#99a1b5"></u-icon>
          </view>
        </view>
      </view> -->
      <view class="group flex flex-c">
        <view class="key">活動地點</view>
        <u-input
          class="u-input flex-1"
          v-model="form.data5"
          :type="type"
          :border="border"
          
          placeholder="請輸入"
          suffixIconStyle="color: #99a1b5;font-size: 16px;"
          suffixIcon="map-fill"
        />
      </view>
      <view class="group flex flex-c">
        <view class="key">活動費用</view>
        <u-input
          class="u-input flex-1"
          v-model="form.data6"
          :type="'number'"
          
          placeholder="請輸入"
          :border="border"
        />
      </view>
      <view class="group flex flex-c">
        <view class="key">聯系方式</view>
        <u-input
          class="u-input flex-1"
          v-model="form.data7"
          :type="type"
          
          placeholder="請輸入"
          :border="border"
        />
      </view>
      <view class="group flex flex-c">
        <view class="key">開始時間</view>
        <view class="u-input  flex-1" @click="showTime1 = true" >
          {{ $u.timeFormat(form.time1, 'yyyy-mm-dd hh:MM') || "請選擇" }}
        </view>
      </view>
      <u-datetime-picker
                :show="showTime1"
                v-model="form.time1"
                mode="datetime"
                @confirm="changeTime1"
        ></u-datetime-picker>
      <view class="group flex flex-c">
        <view class="key">結束時間</view>
        <view class="u-input  flex-1" @click="showTime2 = true" >
          {{ $u.timeFormat(form.time2, 'yyyy-mm-dd hh:MM') || "請選擇" }}
        </view>
      </view>
      <u-datetime-picker
                :show="showTime2"
                v-model="form.time2"
                mode="datetime"
                @confirm="changeTime2"
        ></u-datetime-picker>
      <view class="group flex flex-c flex-j">
        <view class="key">本人是否參加</view>
        <u-switch v-model="joinFlag" activeColor="#f09a3c" ></u-switch>
      </view>
      <view class="group flex flex-c">
        <view class="key">人數({{ rangeValues[0] }}-{{ rangeValues[1]==30?'30+':rangeValues[1] }})</view>
        <view class="flex-1">
          <!-- <u-slider
            v-model="personNum"
            min="1"
            max="10"
            style="width: 100%"
          ></u-slider> -->
          <RangeSlider
						:width="slideWidth"
						:height="slideHeight"
						:blockSize="slideBlockSize"
						:min="slideMin"
						:max="slideMax"
						:values="rangeValues"
						:step="step"
						:liveMode="isLiveMode"
						@rangechange="onRangeChange"
					>
						<view slot="minBlock" class="range-slider-block"></view>
						<!-- 左边滑块的内容 -->
						<view slot="maxBlock" class="range-slider-block"></view>
						<!-- 右边滑块的内容 -->
					</RangeSlider>
        
        </view>
       
      </view>
      <view style="color: #999;font-size: 14px;margin-top: 5px;">
           注意:人数不足会被判为<span style="color: #f33;">[活动举办失败]</span>
      </view> 
      <view class="group">
        <view class="key">活動标签</view>
      </view>
      <view class="act-tag">
        <view class="tag-ul">
          <view class="tag-li"
           v-for="(item,index) in form.tagList" :key="index"
            >{{ item.name }}
            <view class="icon">
              <u-icon
                @click="form.tagList.splice(index,1)"
                name="close-circle-fill"
                color="#99a1b5"
                size="14"
              ></u-icon> </view>
            </view>
            <view class="tag-li" v-if="form.tagList.length==0">請先添加標籤</view>
          <view class="tag-li round" @click="isEdit = true;"
            ><u-icon name="plus" color="#99a1b5" size="14"></u-icon
          ></view>
        </view>
        <view class="edit-tag" v-if="isEdit">
          <view class="flex flex-c">
            <u-input
              placeholder="請輸入"
              suffixIconStyle="color: #99a1b5;font-size: 16px;"
              border="bottom"
              v-model="tabInput"
              clearable
            ></u-input>
            <text style="width: 40%; color: #99a1b5; margin-left: 12px"
            @click="addTabInput()"
              >添加</text
            >
          </view>
          <view class="add">
            <text class="quick">快速添加：</text>
            <view class="tag-li" @click="addTab(item)" v-for="(item,index) in tagList" :key="index">
              {{ item.name }}
            </view>
      
          </view>
        </view>
      </view>
      
      <!-- <view class="group flex flex-c">
        <view class="key">活動審核</view>
        <u-input
          class="u-input flex-1"
          v-model="form.data8"
          :type="type"
          
          placeholder="請輸入"
          :border="border"
        />
      </view> -->
      <view class="group flex flex-c">
        <view class="key">圖文上傳</view>
        <u-upload
          :fileList="fileList1"
          @afterRead="afterRead"
          @delete="deletePic"
          name="1"
          multiple
          :maxCount="10"
        ></u-upload>
      </view>
      <view class="group">
        <!-- <view class="btn">保存草稿</view> -->
        <view class="btn">發起活動</view>
      </view>
    </view>
    <u-calendar
      :show="show"
      mode="range"
      @confirm="change"
      @close="show = false"
    ></u-calendar>
    <u-picker
      :show="show1"
      keyName="label"
      :columns="columns"
      @confirm="confirm"
      @cancel="show1 = false"
    ></u-picker>
  </view>
</template>

<script>
import RangeSlider from '@/components/range-slider/range-slider.vue';

export default {
  components: {
		RangeSlider
	},
  data() {
    return {
      showTime1:false,
      showTime2:false,
      tabInput:'',
      rangeValues: [2, 10],
			slideWidth: 350,
			slideHeight: 80,
			slideBlockSize: 30,
			slideMin: 0,
			slideMax: 30,
			isLiveMode: true,
			step:1,
      isEdit: false,
      personNum: 2,
      joinFlag: false,
      fileList1: [],
      show1: false,
      tagList:[
        {name:'#打卡'},
        {name:'#美食'},
        {name:'#拍照'},
        {name:'#下午茶'},
        {name:'#健身'},
        {name:'#交友'},
        {name:'#蹦迪'},
        {name:'#小酌'},
        {name:'#电影'}
      ],
      columns: [
        [
          {
            value: "1",
            label: "活动主题A",
          },
          {
            value: "2",
            label: "活动主题B",
          },
        ],
      ],
      // 演示地址，请勿直接使用
      action: "http://www.example.com/upload",
      fileList: [
        {
          url: "http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg",
        },
      ],
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      show: false,
      form: {
        tagList:[],
        time1:Number(new Date()),
        time2:Number(new Date()),
      },
      type: "text",
      height: 36,
      border: "surround",
    };
  },
  onLoad() {},
  onReachBottom() {},
  methods: {
    changeTime1(value){
      console.log(value)
      this.showTime1=false
    },
    changeTime2(value){
      console.log(value)
      this.showTime2=false
    },
    addTabInput(){
      this.form.tagList.push({name:this.tabInput})
      this.tabInput=''
    },
    addTab(item){
      this.form.tagList.push(item)
    },
    onRangeChange: function(e) {
			this.rangeValues = [e.minValue, e.maxValue];
		},
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res.data.data);
            }, 1000);
          },
        });
      });
    },
    confirm(e) {
      this.show1 = false;
      console.log(e);
      this.form.data2 = e.value[0].label;
      console.log(this.form.data2);
    },
    change(e) {
      console.log(e);
      this.show = false;
      this.form.data4 = e[0] + "~" + e[1];
    },
  },
};
</script>

<style lang="scss">
.edit-tag {
  margin-top: 6px;
  padding: 6px 12px 24px;
  background: #fff;
  border: solid 1px #dfdfdf;
  border-radius: 10px;
  .add {
    margin: 12px 0 0 8px;
  }
  .quick {
    font-size: 14px;
    color: #999;
  }
  .tag-li {
    position: relative;
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 14px;
    background: #f3f3f3;
    color: #4B5360;
  }
}
.tag-ul {
  margin-top: 12px;
  .tag-li {
    position: relative;
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 4px 12px;
    border-radius: 10px;
    background: #e2e8f0;
    .icon {
      position: absolute;
      right: -2px;
      top: -2px;
    }
  }
  .round {
    padding: 4px;
    border-radius: 50%;
  }
}
.page {
  height: 100%;
  padding: 16px;
  background: #fbfbfb;
  
}
.add-active {
  background: #fff;
  box-shadow: 1px 1px 5px #999;
  
  // margin: 24px;
  padding: 20px;
  padding-bottom: 130rpx;
  border-radius: 10px;
  .group {
    margin-top: 16px;
    display: flex;
    .btn {
      background: #000;
      color: #fff;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 10px;
      flex: 1;
      margin: 5px;
      margin-top: 25px;
    }
    .tip {
      color: grey;
      font-size: 14px;
      .star {
        margin-right: 5px;
      }
    }
    .u-input {
      padding: 0 10px;
      background: #f0f3f8;
      color: #6e6e79;
      text-indent: 5px;
      border-radius: 8px;
      line-height: 40px;
      font-size: 16px;
      position: relative;
      .icon {
        position: absolute;
        right: 8px;
        top: 12px;
      }
    }
    .key {
      margin-right: 20px;
    }
  }
}
</style>
